<script lang="ts">
import { defineComponent, computed, unref } from 'vue'
import { BackTop } from 'ant-design-vue'
import { useRootSetting } from '@/hooks/setting/useRootSetting'
import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting'
import { useDesign } from '@/hooks/web/useDesign'
import { useUserStoreWithOut } from '@/store/user'
import { SettingButtonPositionEnum } from '@admin/tokens'
import SessionTimeoutLogin from '@/views/sys/login/SessionTimeoutLogin.vue'
import LayoutLockPage from '@/views/sys/lock/index.vue'
import SettingDrawer from '@/layouts/default/setting/index.vue'
export default defineComponent({
  name: 'LayoutFeatures',
  components: {
    BackTop,
    LayoutLockPage,
    SettingDrawer,
    SessionTimeoutLogin,
  },
  setup() {
    const {
      getUseOpenBackTop,
      getShowSettingButton,
      getSettingButtonPosition,
      getFullContent,
    } = useRootSetting()
    const userStore = useUserStoreWithOut()
    const { prefixCls } = useDesign('setting-drawer-feature')
    const { getShowHeader } = useHeaderSetting()

    const getIsSessionTimeout = computed(() => userStore.getSessionTimeout)

    const getIsFixedSettingDrawer = computed(() => {
      if (!unref(getShowSettingButton)) {
        return false
      }
      const settingButtonPosition = unref(getSettingButtonPosition)

      if (settingButtonPosition === SettingButtonPositionEnum.AUTO) {
        return !unref(getShowHeader) || unref(getFullContent)
      }
      return settingButtonPosition === SettingButtonPositionEnum.FIXED
    })

    return {
      getTarget: () => document.body,
      getUseOpenBackTop,
      getIsFixedSettingDrawer,
      prefixCls,
      getIsSessionTimeout,
    }
  },
})
</script>

<template>
  <LayoutLockPage />
  <BackTop v-if="getUseOpenBackTop" :target="getTarget" />
  <SettingDrawer v-if="getIsFixedSettingDrawer" :class="prefixCls" />
  <SessionTimeoutLogin v-if="getIsSessionTimeout" />
</template>

<style lang="less">
@prefix-cls: ~'@{namespace}-setting-drawer-feature';

.@{prefix-cls} {
  position: absolute;
  top: 45%;
  right: 0;
  z-index: 10;
  display: flex;
  padding: 10px;
  color: @white;
  cursor: pointer;
  background-color: @primary-color;
  border-radius: 6px 0 0 6px;
  justify-content: center;
  align-items: center;

  svg {
    width: 1em;
    height: 1em;
  }
}
</style>
